<template>
  <view class="container l_f_c">
    <up-navbar
        :autoBack="true"
        :placeholder="false"
        leftIconColor="#fff"
        title="充值"
        bgColor="transparent"
    >
    </up-navbar>
    <view class="bg_set top_bg">
      <view class="text_b_26 text_w">消费券</view>
      <view class="text_b_32 text_w">{{userInfo.money.toFixed(2)}}</view>
    </view>
    <view class="content flex_1">
      <view class="text_b_28">
        充值金额
      </view>
      <view class="input_num_cnt ">
        <view class="it l_f_r_c_c" v-for="(it,i) in [10,20,30,50,100,500]" @click="rechargePayQuery.money=it">{{it}}</view>
      </view>
      <view class="inpu_ l_f_r l_al_c">
        <text class="text_b_32">￥</text>

        <up-input v-model="rechargePayQuery.money" :placeholder="`请输入`" border="none" @update:modelValue="handleInput"
          type="text"></up-input>
      </view>

      <view class="text_b_28">
        充值方式
      </view>
      <view style="width: 100%;">

        <payTypeList v-model="rechargePayQuery.type"></payTypeList>
      </view>
      <view class="l_btn_box2">

        <view class="btn_box_cnt  l_f_r_c_c " @click="rechargePay">确认
        </view>
      </view>
    </view>

  </view>
</template>

<script setup>
import {ref, getCurrentInstance, nextTick} from 'vue';
import payTypeList from "@/components/payTypeList/index.vue";
import {is_weixin} from "@/utils/isWeixinH5";

const { proxy } = getCurrentInstance();
const userInfo=ref(uni.getStorageSync('userInfo'))
function handleInput(value) {
  // let value = valueDate.detail.value;
  console.log(value);
  // 如果输入为空，清空值并返回
  if (value === '') {
    rechargePayQuery.value.money = '';
    return;
  }

  // 使用正则表达式验证输入
  const regex = /^[0-9.]+$/;
  if (regex.test(value)) {
    // 输入有效，更新值
    nextTick(()=>{
      rechargePayQuery.value.money = value;
    })
  } else {
    nextTick(()=>{
      rechargePayQuery.value.money = 0; // 可选：清空无效输入

    })
    // 输入无效，可选择保留旧值或清空，并显示错误信息
  }
}

const rechargePayQuery = ref({
  type:is_weixin()?2: 1,//支付方式  (1, '支付宝'), (2, '微信'),
  money: '',//充值金额
  pay:is_weixin()?0:1,//0.微信H5 1.其他H5或APP(必填)
  callBackUrl: '',//失败回调地址
});

onLoad((e) => {
  // #ifdef H5
  if (e.cbu == 1) {
    uni.showToast({
      title: "充值失败",
      icon: "none"
    });
  }

  // #endif
})
onShow(() => {
  const payOrder=uni.getStorageSync('payOrder');
  if ((orderRef.value||payOrder)&&!is_weixin()) {
    setTimeout(() => {
      proxy.$request({
        url: `api/paymentQuery/?order=${orderRef.value||payOrder}`,
        method: "get",
        success(res) {
          if (res.errno == 0) {
            uni.showToast({
              title: "充值成功",
              icon: "none"
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          } else {
            uni.showToast({
              title: "充值失败",
              icon: "none"
            });
          }
        }
      })
    }, 1000);

  }
})
const orderRef = ref('')
const rechargePay = (e) => {
  rechargePayQuery.value.money = +rechargePayQuery.value.money;
  rechargePayQuery.value.password = e;
  // if (process.env.NODE_ENV === "development" && (rechargePayQuery.value.type == 2 || rechargePayQuery.value.type == 1)) {
  //   console.log("开发环境");
  //   // rechargePayQuery.value.money = 0.01;
  // } else {
  //   console.log("生产环境");
  // }
  // #ifdef H5
  //获取当前路劲
  // rechargePayQuery.value.callBackUrl = window.location.origin + `/h5/#/pages/recharge/recharge?cbu=1`;
  // #endif
  proxy.$request({
    url: `api/recharge/`,
    method: "POST",
    data: rechargePayQuery.value,
    success(res) {
      if (res.errno == 0) {
        console.log(res.data)
        orderRef.value = res.data.order
        uni.setStorageSync('payOrder', res.data.order);
        // #ifdef H5
        window.location.href = res.data.url
        // #endif
        // #ifdef APP-PLUS
        plus.runtime.openURL(res.data.url);
        // #endif
      }

      if (res.errmsg) {
        uni.showToast({
          title: res.errmsg,
          icon: "none"
        });
      }

    }
  });
};
//返回事件
onBackPress(()=>{
  uni.removeStorageSync('payOrder');
})
</script>


<style lang="scss" scoped>
.container {
  width: 750rpx;
  height: 100vh;
  background: #F7F3E8;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  box-sizing: border-box;

  .content {

    background: #FFFFFF;
    padding: 42rpx 30rpx;
    height: calc(100vh - 400rpx);
    box-sizing: border-box;
    margin-top: -26rpx;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    .text_b_28 {
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }

    .inpu_ {
      width: 690rpx;
      height: 96rpx;
      background: #F4F2EF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 0 20rpx;

      .text_b_26 {
        margin-right: 10rpx;
      }
    }
  }
}

.payWithPassword_cnt {
  position: relative;
  z-index: 999999;
}

:deep(.uni-input-placeholder, .uni-textarea-placeholder) {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
}

:deep(.uni-input-input) {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold !important;
  font-size: 32rpx !important;
  color: #000000 ! important;
}
.top_bg{
  background-image:url("https://pili-vod.guanxikeji.com/fubao/img/1757310208471.png") ;
  height: 426rpx;
  width: 100vw;
  padding-top: 200rpx;
  padding-left: 50rpx;
  box-sizing: border-box;
  .text_b_32{
    font-size: 48rpx;
    margin-top: 10rpx;
  }

}
.input_num_cnt{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20rpx;
  margin-bottom: 30rpx;
  .it{
    width: 220rpx;
    height: 96rpx;
    background: #F4F4F4;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-size: 48rpx;
    color: #2D2D2D;
    box-sizing: border-box;

  }
}
.l_btn_box2 {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 150rpx;
  padding: 10rpx 3.5%;
  box-sizing: border-box;
  z-index: 1;

  .btn_box_cnt {
    margin: 0 auto;
    margin-top: 20rpx;
    width: 690rpx;
    height: 88rpx;
    background: #F63B29;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    color: #fff;
  }
}
:deep(.u-navbar__content__title){
  color: #fff;
}
</style>
